<template>
  <div class="user-info-head" @click="editCropper">
    <img :src="avatar" title="点击上传头像" class="img-circle img-lg" />
  </div>
  <a-dialog :dialogTableVisible="dialogTableVisible" width="800px" :show="false" title="修改头像" @handle="handle">
    <el-row>
      <el-col :style="{ height: '350px' }">
        <vueCropper ref="cropper" :img="avatar" :info="options.info" :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight" :fixedBox="options.fixedBox"
            @realTime="realTime" />
      </el-col>
    </el-row>
  </a-dialog>
</template>

<script setup>
import { vueCropper }  from "vue-cropper";
// import VueCropper from "vue-cropper"; // 导入图片裁剪工具vue-cropper
import ADialog from '../user/add.vue'
import { ref, onMounted } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/stores/user.js'

// 获取store数据
const store = new useStore()
const { avatar } = storeToRefs(store)
// 展开弹窗
const dialogTableVisible = ref(false)
// 点击头像
function editCropper() {
  dialogTableVisible.value = true
}
// 关闭弹窗
function handle() {
  dialogTableVisible.value = false
}

// 定义裁剪库的参数
const options = {
  info: true, // 是否展示截图框信息
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 200, // 默认生成截图框宽度
  autoCropHeight: 200, // 默认生成截图框高度
  fixedBox: true, // 固定截图框大小 不允许改变
}
const cropper = ref({})

onMounted(() => {

})
function realTime() {
  
}
</script>

<style lang="scss" scoped>
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
  cursor: pointer;

  .img-circle {
    border-radius: 50%;
  }

  .img-lg {
    width: 120px;
    height: 120px;
  }
}

.user-info-head:hover:after {
  content: '+';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 110px;
  border-radius: 50%;
  text-align: center;
}
</style>